<template>
  <div style="display: flex">
    <div style="flex: 1">
      <!-- Collapse button -->
      <span
        style="font-size: 25px; cursor: pointer"
        :class="collapseIcon"
        @click="emit('collapse')"
        :title="collapseTitle"
      ></span>

      <!-- Back button -->
      <span
        style="font-size: 25px; cursor: pointer; margin-left: 10px"
        class="iconfont icon-r-left"
        @click="back"
        title="返回"
      ></span>

      <!-- Breadcrumb -->
      <el-breadcrumb
        style="display: inline-block; margin-left: 30px; font-size: 22px"
      >
        <el-breadcrumb-item :to="{ path: '/manage/home' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ routePath }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- User dropdown -->
    <el-dropdown style="margin-right: 40px; cursor: pointer">
      <span class="el-dropdown-link">
        <div style="display: inline-block; font-size: 22px; font-weight: 600">
          <img :src="baseApi + user.avatarUrl" class="avatar" />
          {{ user.nickname }}
          <i
            class="el-icon-arrow-down el-icon--right"
            style="margin-right: 15px"
          ></i>
        </div>
      </span>
      <template #dropdown>
        <el-dropdown-menu style="text-align: center">
          <el-dropdown-item>
            <div @click="router.push('/manage/manageperson')">个人信息</div>
          </el-dropdown-item>
          <el-dropdown-item>
            <div @click="logout">退出</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

const store = useStore();
const route = useRoute();
const router = useRouter();

// Props
const props = defineProps({
  collapseIcon: String,
  collapseTitle: String,
  user: {
    type: Object,
    default: () => ({}),
  },
});

// Emits
const emit = defineEmits(["collapse"]);

// Data
const routePath = ref<string>(route.meta.path as string);
const baseApi = ref<string>(store.state.baseApi);

// Methods
const logout = () => {
  localStorage.removeItem("user");
  router.push("/login");
  ElMessage.success("退出成功");
};

const back = () => {
  router.go(-1);
};

// Watchers
watch(
  () => route.meta.path,
  (newPath) => {
    routePath.value = newPath as string;
  }
);
</script>

<style scoped>
.avatar {
  width: 60px;
  border-radius: 10px;
  position: relative;
  top: 10px;
  right: 5px;
}
</style>
